import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators, Dispatch } from 'redux'
import * as Actions from '../../../store/action'
import { ALLSTATE, LISTITEM } from '../../../types/store.d'
import { Table, Space } from 'antd';
import axios from '../../../utils/request'
import '../../../api/homeList'
import { LIST_IGNORE } from 'antd/lib/upload/Upload'


// interface dataItem {
//     key: string,
//     name: string,
//     age: number,
//     address: string,
//     tags: string[],
// }
interface IPROPS {
    setList: (can: LISTITEM[]) => void;
    dataList: LISTITEM[]
}

function Index(props: IPROPS) {

    const { setList, dataList } = props
    console.log(props, 123)
    const handleClick = (item: LISTITEM) => {
        console.log(item, 123)
    }
    const [listData, setListData] = useState([])

    useEffect(() => {
        axios.get('/api/list').then(res => {
            setList(res.data.list)
        })
        return () => {
            console.log('销毁生命周期')
        }
    }, [])

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            render: (text: string) => <a>{text}</a>,
        },
        {
            title: 'Price',
            dataIndex: 'price',
            key: 'price',
            render: (text: string) => <a>{text}</a>,
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: 'Action',
            key: 'action',
            render: (text: string, record: LISTITEM) => (
                <Space size="middle">
                    <a>Invite {record.name}</a>
                    <a onClick={() => handleClick(record)}>Delete</a>
                </Space>
            ),
        },
    ];
    return (
        <div>
            <Table columns={columns} dataSource={dataList} />
        </div >
    )
}


const mapStateToProps = (state: ALLSTATE) => ({
    dataList: state.list
})

const mapDispatchToProps = (dispatch: Dispatch) => {
    return {
        ...bindActionCreators(Actions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Index)

